import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
import { toast } from "sonner";
import UserService from "@/services/user";
import { useTheme } from "@/hooks/useTheme";

const iconOptions = [
  "fa-solid fa-user", "fa-solid fa-user-tie", "fa-solid fa-user-ninja", "fa-solid fa-user-astronaut", "fa-solid fa-user-secret"
];

export default function Register() {
  const navigate = useNavigate();
  const { isDark, toggleTheme } = useTheme();
  const [registerForm, setRegisterForm] = useState({
    userName: '',
    account: '',
    password: '',
    userIcon: 'fa-solid fa-user'
  });
  const [isRegistering, setIsRegistering] = useState(false);

  const handleRegister = async () => {
    if (!registerForm.userName.trim() || !registerForm.account.trim() || !registerForm.password) {
      toast.error('请填写完整信息');
      return;
    }
    setIsRegistering(true);
    try {
      const res = await UserService.addUser({
        userName: registerForm.userName,
        userIcon: registerForm.userIcon,
        account: registerForm.account,
        password: registerForm.password
      });
      if (res.success) {
        toast.success('注册成功', {
          action: {
            label: '立即登录',
            onClick: () => navigate('/login')
          },
          cancel: {
            label: '稍后登录',
            onClick: () => {}
          }
        });
        setRegisterForm({ userName: '', account: '', password: '', userIcon: 'fa-solid fa-user' });
      } else {
        toast.error(res.data?.message || '注册失败');
      }
    } catch (error) {
      toast.error('注册过程中发生错误');
    } finally {
      setIsRegistering(false);
    }
  };

  return (
    <div className={cn(
      "min-h-screen flex flex-col bg-transparent",
      isDark ? "text-gray-100" : "text-gray-900"
    )}>
      <header className={cn(
        "sticky top-0 z-10 p-2 border-b",
        isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"
      )}>
        <div className="container mx-auto flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <i className="fa-solid fa-file-code text-2xl text-blue-500"></i>
            <h1 className="font-mono font-bold text-xl">API Docs</h1>
          </div>
          <button 
            onClick={toggleTheme}
            className={cn(
              "w-10 h-10 rounded-full flex items-center justify-center",
              isDark ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"
            )}
          >
            <i className={isDark ? "fa-solid fa-sun" : "fa-solid fa-moon"}></i>
          </button>
        </div>
      </header>
      <main className="flex-1 flex items-center justify-center p-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className={cn(
            "w-full max-w-md p-8 rounded-xl shadow-lg",
            isDark ? "bg-gray-800" : "bg-white"
          )}
        >
          <h2 className="font-mono font-bold text-2xl mb-6 text-center">用户注册</h2>
          <div className="space-y-4">
            <div>
              <label className="block font-mono text-sm mb-1">用户名</label>
              <input
                type="text"
                value={registerForm.userName}
                onChange={e => setRegisterForm({ ...registerForm, userName: e.target.value })}
                className={cn(
                  "w-full px-4 py-2 rounded-md border font-mono",
                  "focus:outline-none focus:ring-2",
                  isDark ? "border-gray-700 focus:ring-blue-500 bg-gray-700" : "border-gray-300 focus:ring-orange-500 bg-white"
                )}
                placeholder="输入用户名"
              />
            </div>
            <div>
              <label className="block font-mono text-sm mb-1">账号</label>
              <input
                type="text"
                value={registerForm.account}
                onChange={e => setRegisterForm({ ...registerForm, account: e.target.value })}
                className={cn(
                  "w-full px-4 py-2 rounded-md border font-mono",
                  "focus:outline-none focus:ring-2",
                  isDark ? "border-gray-700 focus:ring-blue-500 bg-gray-700" : "border-gray-300 focus:ring-orange-500 bg-white"
                )}
                placeholder="输入账号"
              />
            </div>
            <div>
              <label className="block font-mono text-sm mb-1">密码</label>
              <input
                type="password"
                value={registerForm.password}
                onChange={e => setRegisterForm({ ...registerForm, password: e.target.value })}
                className={cn(
                  "w-full px-4 py-2 rounded-md border font-mono",
                  "focus:outline-none focus:ring-2",
                  isDark ? "border-gray-700 focus:ring-blue-500 bg-gray-700" : "border-gray-300 focus:ring-orange-500 bg-white"
                )}
                placeholder="输入密码"
              />
            </div>
            <div>
              <label className="block font-mono text-sm mb-1">用户头像</label>
              <div className="grid grid-cols-5 gap-2 mb-2">
                {iconOptions.map(icon => (
                  <motion.button
                    key={icon}
                    onClick={() => setRegisterForm({ ...registerForm, userIcon: icon })}
                    className={cn(
                      "p-2 rounded-md flex items-center justify-center",
                      registerForm.userIcon === icon
                        ? (isDark ? "bg-blue-600" : "bg-orange-500")
                        : (isDark ? "hover:bg-gray-700" : "hover:bg-gray-100")
                    )}
                    whileHover={{ scale: 1.1 }}
                  >
                    <i className={cn(
                      icon,
                      "text-xl",
                      registerForm.userIcon === icon ? "text-white" : (isDark ? "text-blue-400" : "text-orange-500")
                    )}></i>
                  </motion.button>
                ))}
              </div>
            </div>
            <div className="flex space-x-2">
              <button
                onClick={handleRegister}
                disabled={isRegistering}
                className={cn(
                  "w-full py-2 px-4 rounded-md font-medium flex items-center justify-center",
                  isDark ? "bg-blue-600 hover:bg-blue-700" : "bg-orange-500 hover:bg-orange-600",
                  "text-white",
                  isRegistering ? "opacity-75" : ""
                )}
              >
                {isRegistering ? (
                  <>
                    <i className="fa-solid fa-spinner fa-spin mr-2"></i>
                    注册中...
                  </>
                ) : (
                  "注册"
                )}
              </button>
            </div>
            <div className="mt-4 text-center">
              <motion.button
                onClick={() => navigate('/login')}
                className={cn(
                  "text-sm font-mono hover:underline",
                  isDark ? "text-blue-400" : "text-blue-500"
                )}
                whileHover={{ scale: 1.05 }}
              >
                已有账号？去登录
              </motion.button>
            </div>
          </div>
        </motion.div>
      </main>
    </div>
  );
} 